import 'package:flutter/material.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 营业统计
///
class TradeStatistics extends StatefulWidget {
  const TradeStatistics({Key? key}) : super(key: key);

  @override
  State<TradeStatistics> createState() => _TradeStatisticsState();
}

class _TradeStatisticsState extends State<TradeStatistics> with SingleTickerProviderStateMixin {
  late TabController _controller;

  List<String> tabs = ['7日内', '30日内', '自定义'];

  int index = 0;

  PreferredSizeWidget get bottom {
    return PreferredSize(
        preferredSize: const Size.fromHeight(Sizes.default50),
        child: Container(
          decoration: const BoxDecoration(
            color: Colors.white,
          ),
          height: Sizes.default50,
          alignment: Alignment.center,
          child: ToolsUtils.getClientTabBar(tabs, _controller, onTap: (int index) {
            setState(() {
              this.index = index;
            });
          }),
        ));
  }

  @override
  void initState() {
    _controller = TabController(length: tabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('营业统计', bottom: bottom),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: Sizes.default50,
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
              alignment: Alignment.centerLeft,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '2021-11-10 至 2021-11-16',
                    style: StylesUtils.customTextStyle(color: ColorsUtils.color797),
                  ),
                  IconButton(
                      onPressed: () {
                        ToolsUtils.openDateRangePicker(context,
                            onConfirm: (DateTime startDateTime, DateTime endDateTime,
                                List<int> startSelectedIndex, List<int> endSelectedIndex) {});
                      },
                      icon: ToolsUtils.getUrlSvg(
                          'https://cdn7.axureshop.com/demo/1525603/images/营业统计/u3879.svg',
                          width: Sizes.default20,
                          height: Sizes.default20))
                ],
              ),
            ),
            Container(
                decoration: const BoxDecoration(color: Colors.white),
                child: CustomPaint(
                  painter: _LineColorPainter(),
                  child: ListBody(
                    children: [
                      Container(
                          height: 90,
                          padding: const EdgeInsets.only(top: Sizes.default30),
                          child: Row(
                            children: [
                              Expanded(
                                  child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      '营业总额',
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.color515),
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.center,
                                    margin: const EdgeInsets.only(top: Sizes.default15),
                                    child: Text(
                                      '￥30,687.68',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorCc0, fontSize: Sizes.default20),
                                    ),
                                  )
                                ],
                              )),
                              Expanded(
                                  child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      '客单价',
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.color515),
                                    ),
                                  ),
                                  Container(
                                    alignment: Alignment.center,
                                    margin: const EdgeInsets.only(top: Sizes.default15),
                                    child: Text(
                                      '￥187.68',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorCc0, fontSize: Sizes.default20),
                                    ),
                                  )
                                ],
                              ))
                            ],
                          )),
                      Container(
                        height: 90,
                        padding: const EdgeInsets.only(top: Sizes.default30),
                        child: Row(
                          children: [
                            Expanded(
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.center,
                                      child: Text(
                                        '成交单',
                                        style: StylesUtils.customTextStyle(color: ColorsUtils.color515),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: Sizes.default15),
                                      child: Text(
                                        '1,687',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCc0, fontSize: Sizes.default20),
                                      ),
                                    )
                                  ],
                                )),
                            Expanded(
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.center,
                                      child: Text(
                                        '退款订单',
                                        style: StylesUtils.customTextStyle(color: ColorsUtils.color515),
                                      ),
                                    ),
                                    Container(
                                      alignment: Alignment.center,
                                      margin: const EdgeInsets.only(top: Sizes.default15),
                                      child: Text(
                                        '68',
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.colorCc0, fontSize: Sizes.default20),
                                      ),
                                    )
                                  ],
                                ))
                          ],
                        ),
                      )
                    ],
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

class _LineColorPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Offset.zero & size;
    Paint paint = Paint()
      ..color = ColorsUtils.parseColorFromHexString('#D7D7D7')
      ..isAntiAlias = false
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    Path path = Path();
    var x = (rect.width - 96) / 2;
    var y = rect.height / 2;
    path.moveTo(x, y);
    path.lineTo(x + 96, y);
    canvas.drawPath(path, paint);

    Path path2 = Path();
    var x2 = rect.width / 2;
    var y2 = (rect.height - 50) / 2;
    path2.moveTo(x2, y2);
    path2.lineTo(x2, y2 + 50);
    canvas.drawPath(path2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
